<template>
  <div>
    <!-- v-if v-show的区别在于，卸载or just 不可见 -->
    <!-- 卸载会触发生命周期函数~ -->
    <A v-if="true" />
    <B v-show="true" />
    <C />
    <D />
    <E />
    <F />
    <G ref="g_component" />
    <button @click="console.log(g_component)">
      测试从App获取G组件
    </button>
    <H :list='personList' a="这是a的值" />
    <I />
  </div>
</template>

<script lang="ts" setup name="Learn">
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, reactive, ref } from 'vue'
import A from '@/LearnPart/A.vue'
import B from '@/LearnPart/B.vue'
import C from '@/LearnPart/C.vue';
import D from '@/LearnPart/D.vue';
import E from '@/LearnPart/E.vue';
import F from '@/LearnPart/F.vue';
import G from '@/LearnPart/G.vue';
let g_component = ref()
import H from '@/LearnPart/H.vue';
import I from '@/LearnPart/I.vue';

import { type Persons } from '@/types'
let personList = reactive<Persons>([
  { id: '1', name: '张三', age: 18 },
  { id: '2', name: '李四', age: 18 },
  { id: "3", name: '王五', age: 18 },
])

// console.log('创建');
// onBeforeMount(() => {
//   console.log('挂载前');
// })
// onMounted(() => {
//   console.log('挂载后');
// })
// onBeforeUpdate(() => {
//   console.log('更新前');
// })
// onUpdated(() => {
//   console.log('更新后');
// })

</script>

<style></style>